﻿@page "/features/border-radius"

<DocsPage>
    <DocsPageHeader Title="Border Radius" SubTitle="Use border classes to quickly change border-radius." />
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Default Radius</Title>
                <Description>
                    <MudText>When using the classes without any size ending it will apply the set themes default border-radius.</MudText>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <BorderRadiusDefaultExample />
            </SectionContent>
            <SectionSource Code="BorderRadiusDefaultExample" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Pill and Circle</Title>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <BorderRadiusPillnCircleExample />
            </SectionContent>
            <SectionSource Code="BorderRadiusPillnCircleExample" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Remove Border Radius</Title>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <BorderRadiusRemoveExample />
            </SectionContent>
            <SectionSource Code="BorderRadiusRemoveExample" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Different strengths</Title>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <BorderRadiusSizeExample />
            </SectionContent>
            <SectionSource Code="BorderRadiusSizeExample" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Rounding Sides</Title>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <BorderRadiusSidesExample />
            </SectionContent>
            <SectionSource Code="BorderRadiusSidesExample" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Rounding Corners</Title>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <BorderRadiusCornerExample />
            </SectionContent>
            <SectionSource Code="BorderRadiusCornerExample" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>